<template>
	<view class="login">
		<!-- 头部 -->
		<!-- #ifndef MP-WEIXIN -->
		<public-header :title="title"></public-header>
		<view class="hei_100"></view>
		 <!-- #endif -->
		<!-- end -->

		<!-- 内容 -->
		<view class="cont">
			<view class="title">欢迎登录</view>
			<view class="name">Bee到家政APP</view>
			<wInput v-model="phoneData" type="text" maxlength="11" placeholder="请输入手机号"></wInput>
			<view class="codeView">
				<wInput v-model="code" type="text" maxlength="4" placeholder="请输入右边验证码">
			
				</wInput>
				<view class="canvas-img-code" @click="refresh()">
					<canvas :style="{width:width+'px',height:height+'px'}" canvas-id="imgcanvas" @error="canvasIdErrorCallback"></canvas>
				</view>
			</view>
			<wInput v-if="code==str" v-model="verCode" type="number" maxlength="6" placeholder="验证码" isShowCode ref="runCode" @setCode="getVerCode()"></wInput>
			<view class="tips"></view>
			<wButton text="登 录" :rotate="isRotate" @click.native="startLogin()" class="wbutton"></wButton>
			<view class="clearfix nav"><navigator url="/pages/register/login" class="fl">密码登录</navigator></view>
		</view>
		<!-- end -->

		<!-- 其他登录方式 -->
		<view class="other">
			<view class="mor">
				<view class="line"></view>
				<view class="ot">其他登录方式</view>
			</view>
			<view class="mor-link clearfix">
				<view class="botton">
					<image src="/static/images/middle_button_WeChat@2x.png" mode="widthFix"></image>
					<button class="wxlogin" open-type="getUserInfo"  @getuserinfo="bindGetUserInfo()">微信登录</button>
				</view>
				<!-- <view class="fr">
					<image src="/static/images/middle_button_qq@2x.png" mode="widthFix"></image>
					<view>QQ登录</view>
				</view> -->
			</view>
		</view>
		<!-- end -->
	</view>
</template>

<script>
import PublicHeader from '@/components/PublicHeader.vue';
import wInput from '@/components/button/watch-input.vue'; //input
import wButton from '@/components/button/watch-button.vue'; //button
import {mapState,mapMutations} from 'vuex'

var _this;
export default {
	components: {
		PublicHeader,
		wInput,
		wButton
	},
	data() {
		return {
			title: '',
			str: '-',
			code: '',
			phoneData: '', //电话
			verCode: '', //验证码
			isRotate: false ,//是否加载旋转
			width: 120,
			height: 35
		};
	},
	mounted() {
		_this = this;
		this.init()
	},
	methods: {
		...mapMutations(['login']),
		getVerCode() {
			// if (this.code!=this.str) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		position: 'bottom',
			// 		title: '请在上方填写正确的验证码'
			// 	});
			// 	return false;
			// }
			//获取验证码
			if (_this.phoneData.length != 11) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请正确填写手机号'
				});
				return false;
			}
			_this.$http
				.post('/user/sendcaptcha', {
					phone: _this.phoneData
				})
				.then(function(response) {
					console.log('成功', response);
					_this.$refs.runCode.$emit('runCode'); //触发倒计时
				})
				.catch(function(error) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					console.log('失败', error);
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '验证码发送失败'
					});
				});
		},
		startLogin() { //登录
			if (_this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false;
			}
			if (_this.phoneData.length == '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '手机号不能为空'
				});
				return;
			}
			if (_this.verCode.length == '') {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '请输入正确的验证码'
				});
				return;
			}
			_this.isRotate = true;
			_this.$http
				.post('/user/loginusecaptcha', {
					phone: _this.phoneData,
					captcha: _this.verCode
				})
				.then(function(response) {
					console.log('成功', response);
					setTimeout(function() {
						_this.isRotate = false;
						_this.login(response.data)
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: '登录成功'
						});
						uni.switchTab({
							url: '/pages/personal/index'
						});
					}, 1000);
				})
				.catch(function(error) {
					//这里只会在接口是失败状态返回，不需要去处理错误提示
					console.log('失败', error);
					setTimeout(function() {
						_this.isRotate = false;
						uni.showToast({
							icon: 'none',
							position: 'bottom',
							title: error.msg
						});
					}, 1000);
				});
		},
		// 初始化验证码
		init: function() {
			_this.code = ''
			console.log('start');
			var context = uni.createCanvasContext('imgcanvas', this),
				w = this.width,
				h = this.height;
			context.setFillStyle("white");
			context.setLineWidth(5);
			context.fillRect(0, 0, w, h);
			var pool = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"],
				str = '';
			for (var i = 0; i < 4; i++) {
				var c = pool[this.rn(0, pool.length - 1)];
				var deg = this.rn(-30, 30);
				context.setFontSize(18);
				context.setTextBaseline("top");
				context.setFillStyle(this.rc(80, 150));
				context.save();
				context.translate(30 * i + 15, parseInt(h / 1.5));
				context.rotate(deg * Math.PI / 180);
				context.fillText(c, -15 + 5, -15);
				context.restore();
				str += c;
			}
			// uni.setStorage({
			// 	key: 'imgcode',
			// 	data: str,
			// });
			_this.str = str
			console.log(str)
			for (var i = 0; i < 40; i++) {
				context.beginPath();
				context.arc(this.rn(0, w), this.rn(0, h), 1, 0, 2 * Math.PI);
				context.closePath();
				context.setFillStyle(this.rc(150, 200));
				context.fill();
			}
			context.draw();
			console.log('end');
		},
		rc: function(min, max) {
			var r = this.rn(min, max);
			var g = this.rn(min, max);
			var b = this.rn(min, max);
			return "rgb(" + r + "," + g + "," + b + ")";
		},
		rn: function(max, min) {
			return parseInt(Math.random() * (max - min)) + min;
		},
		refresh: function() {
			this.init();
		},
		canvasIdErrorCallback: function(e) {
			console.error(e.detail.errMsg)
		}
	}
};
</script>

<style scoped lang="scss">
.cont {
	padding: 0 84rpx;
	color: #f4333d;
	font-size: 24rpx;
	letter-spacing: 0.67rpx;
	line-height: 52rpx;
	margin-top: 50rpx;
}
.cont .title {
	font-size: 32rpx;
	color: #333;
	letter-spacing: 1.52rpx;
	line-height: 45rpx;
	margin-bottom: 10rpx;
}
.cont .name {
	font-size: 50rpx;
	color: #333;
	line-height: 70rpx;
	letter-spacing: 2.38rpx;
	font-weight: 500;
	margin-bottom: 8rpx;
}
.cont > navigator {
	color: #65b4ff;
	font-size: 32rpx;
	letter-spacing: 1.52rpx;
	line-height: 45rpx;
}
.cont input {
	height: 100rpx;
	line-height: 100rpx;
	font-size: 36rpx;
	color: #333;
	letter-spacing: 1.71;
	border-bottom: 1rpx solid #e7e7e7;
	margin-bottom: 10rpx;
}
.cont .btn {
	width: 582rpx;
	height: 84rpx;
	line-height: 84rpx;
	text-align: center;
	background-color: $uni-color1;
	box-shadow: 0px 14rpx 40rpx 0rpx $uni-color1;
	border-radius: 45rpx;
	color: #fff;
	font-size: 32rpx;
	/* margin-top: 30rpx; */
}
.cont .password {
	position: relative;
}
.cont .password view {
	position: absolute;
	right: 0;
	top: 24rpx;
	color: $uni-color1;
}
.cont .nav {
	color: #888;
	font-size: 28rpx;
	margin-top: 40rpx;
}
.cont .tips {
	height: 70rpx;
	line-height: 70rpx;
}
.other{
	padding-top: 175rpx;
}
.mor {
	position: relative;
	padding: 64rpx;
	/* margin: 0 auto; */
	/* padding-top:350rpx; */
}
.mor .line {
	width: 100%;
	height: 1rpx;
	background-color: #e6e6e6;
}
.mor .ot {
	width: 180rpx;
	text-align: center;
	position: absolute;
	font-size: 24rpx;
	color: #888;
	letter-spacing: 1.14rpx;
	left: 50%;
	top: 48rpx;
	margin-left: -90rpx;
	background: #fff;
	margin-bottom: 52rpx;
}
.mor-link {
	color: #888;
	font-size: 22rpx;
	letter-spacing: 0.85rpx;
	width: 300rpx;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin-top: 50rpx; */
}
.mor-link image {
	width: 48rpx;
	/* margin-left: 22rpx;
	margin-bottom: 18rpx; */
}
.botton{
	width: 360rpx;
	height: 160rpx;
	/* background-color: pink; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.wxlogin{
	border: none !important;
	background-color: #FFFFFF;
	height: 60rpx;
	line-height: 1;
}
uni-button{
	line-height: 1;
	color: #666!important;
}
.wxlogin:after{
	border: none !important;
}

.codeView {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

.canvas-img-code {
	display: inline-block;
}
</style>
